<template>
<div class="main">
  <div class="banner">
    <div class="img-box animated zoom-out">
      <a href="#">
        <img src="../../assets/images/banner.jpg" alt="">
        <!--<img src="../../assets/images/banner-phone.jpg" alt="">-->
      </a>
    </div>
    <div class="text-box">
      <div class="text-box-content clear-overflow">
        <p class="title animated fadeInUp delay1">
          <img src="../../assets/images/banner-title.svg" alt="">
        </p>
        <p class="more-btn animated fadeInUp delay2">
          <a href="#">了解更多</a>
        </p>
        <p class="tips animated fadeInUp delay3" >
          OnePlus 5T 新品发布会
          <br>
          2017.11.28     14:00
        </p>
      </div>

    </div>
  </div>
  <div class="section1">
    <ul>
      <li>
        <h4 style="color: #ffffff">谈谈 3.5mm 耳机孔</h4>
        <a href=""><img src="../../assets/images/section1-1.jpg" alt=""></a>
      </li>
      <li>
        <h4>手把手教你玩转 H2OS</h4>
        <a href=""><img src="../../assets/images/section1-2.jpg" alt=""></a>
      </li>
      <li>
        <h4>用美美的照片，换美美的周边</h4>
        <a href=""><img src="../../assets/images/section1-3.jpg" alt=""></a>
      </li>
    </ul>
  </div>
  <div class="sub-banner">
    <img src="../../assets/images/banner-2.jpeg" alt="">
    <div class="text-box">
      <h4>Shot on OnePlus</h4>
      <a href="#">我要参加</a>
    </div>
  </div>
  <div class="section2">
    <div class="section2-content">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="8" >
          <el-card :body-style="{ padding: '0px' }">
            <img src="../../assets/images/section2-1.jpeg" class="image">
            <div class="text-box">
              <h4>博客</h4>
              <p class="bottom clearfix">
                产品经理曾熙：OnePlus 骨子里有种颠覆者基因
              </p>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="8" >
          <el-card :body-style="{ padding: '0px' }">
            <img src="../../assets/images/section2-2.jpeg" class="image">
            <div class="text-box">
              <h4>新闻</h4>
              <p class="bottom clearfix">
                OnePlus 5 JCC+ 特别版，将艺术融入工业设计
              </p>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="8" >
          <el-card :body-style="{ padding: '0px' }">
            <img src="../../assets/images/section2-3.jpeg" class="image">
            <div class="text-box">
              <h4>视频</h4>
              <p class="bottom clearfix">
                OnePlus 5 月岩灰, 优雅含蓄的性能王者
              </p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</div>
</template>
<style scoped>
  .main {
    width:100%;
  }
  .banner {
    min-height: 800px;
    position: relative;
    overflow: hidden;
    height: calc(100vh - 80px);
  }
  .banner .img-box {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .banner .img-box a {
    display: block;
    height:100%;
  }
  .banner .img-box img {
    min-height: 808px;
    margin-top: -100px;
    position: absolute;
    top:0;
    left:0;
  }
  .banner .text-box {
    position: absolute;
    width: 100%;
    max-width: 1200px;
    top:50%;
    left:50%;
    text-align: center;
  }
  .banner .text-box-content {
    transform: translate(-50%,-55%);
  }
  .banner .text-box-content>p.title {
    margin: 4rem 0 6rem;
  }
  .banner .text-box-content>p.title>img {
    width:30%;
  }
  .banner .text-box-content>p.more-btn>a{
    display: inline-block;
    box-sizing: content-box;
    position: relative;
    width: 240px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    cursor: pointer;
    font-size: 18px;
    border: 1px solid #000000;
    transition:color linear .2s;
  }
  .banner .text-box-content>p.more-btn>a:hover {
    color: #ffffff;
  }
  .banner .text-box-content>p.more-btn>a:before {
    content: '';
    position: absolute;
    top:0;
    left:0;
    display:block;
    width: 0px;
    height: 55px;
    color: #000;
    transition: width linear .2s;
  }
  .banner .text-box-content>p.more-btn>a.ishover:before {
    width:240px;
  }
  .banner .text-box-content>p.tips {
    font-family: YingHei;
    font-size: 18px;
    margin-top: 50px;
    line-height: 24px;
  }

  .section1 {
    width:100%;
  }
  .section1>ul {
    width:100%;
    display: flex;
    flex-wrap: wrap;
  }
  .section1>ul>li{
    width:33.333333%;
    position: relative;
  }
  .section1>ul>li>h4 {
    position: absolute;
    top:8%;
    left:5%;
    font-weight: 400;
    font-size: 24px;
  }
  .section1>ul>li>a>img {
    width: 100%;
  }
  .sub-banner {
    width: 100%;
    position: relative;
  }
  .sub-banner .text-box {
    position: absolute;
    top: 50%;
    width: 100%;
    margin-top: -70px;
    text-align: center;
  }
  .sub-banner .text-box>h4 {
    font-size: 48px;
    color: #fff;
    font-weight: 400;
    margin-bottom: 40px;
  }
  .sub-banner .text-box>a {
    display: inline-block;
    box-sizing: content-box;
    width: 130px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    background: 0 0;
    color: #fff;
    border: 2px solid #fff;
    position: relative;
    transition:color linear .1s;
  }
  .sub-banner .text-box>a:hover {
    color: #000;
  }
  .sub-banner .text-box>a:before {
    content: '';
    position: absolute;
    top:0;
    left:0;
    display:block;
    width: 0px;
    height: 40px;
    color: #fff;
    transition: width linear .2s;
  }
  .sub-banner .text-box>a.ishover:before {
    width:130px;
  }
  .section2 {
    width:100%;
    padding: 5% 0;
    background: #f6f6f6;
  }
  .section2-content {
    max-width: 1200px;
    margin:0 auto;
  }
  .section2 .text-box {
    padding: 5% 6%;
    min-height: 135px;
  }
  .section2 .text-box>h4 {
    font-weight: 400;
    line-height: 34px;
    font-size: 18px;
  }
  .section2 .text-box>p {
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
  }
  @media screen and (max-width: 767px) {
    .section1>ul>li {
      width: 100%;
    }
    .section2-content {
      padding: 0 10px;
    }
  }
  @media screen and (min-width:768px) and (max-width: 1199px) {
    .section2-content {
      padding: 0 20px;
    }
    .section1>ul>li>h4[data-v-3549631e] {
      font-size: 18px;
    }
  }


</style>
<style>
  .main .el-card {
    border:none;
    border-radius: 0px;
    box-shadow: none;
    -webkit-transition: all .3s;;
    -moz-transition: all .3s;;
    -ms-transition: all .3s;;
    -o-transition: all .3s;;
    transition: all .3s;;
  }
  .main .el-card:hover {
    transform: translateY(-3px);
    -webkit-box-shadow:  0 15px 40px 0 rgba(0,0,0,.2);
    -moz-box-shadow: 0 15px 40px 0 rgba(0,0,0,.2);
    box-shadow: 0 15px 40px 0 rgba(0,0,0,.2);
  }
  .main .el-card__body>img {
    width: 100%;
  }
  @media screen and (max-width: 767px) {
    .main .el-card {
      width: 90%;
      display: block;
      margin: 0 auto 20px;
    }
  }


</style>
